$(function () {

    //渲染页面
    initArtCateList()
    function initArtCateList() {
        //发送ajax请求，获取数据
        axios({
            url:'/my/article/cates',
            method:'get',
        }).then(({data:res})=>{
            //成功回调
            console.log(res)
            if(res.status != 0 ){
                return layer.msg(res.message)
            }
            //获得数据 渲染页面
            let arr = []
            res.data.forEach(function(value){
                arr.push(`
                    <tr>
                        <td>${value.Id}</td>
                        <td>${value.name}</td>
                        <td>${value.alias}</td>
                        <td>
                            <button data-id="${value.Id}" id="editbtn" class="layui-btn layui-btn-xs">修改</button>
                            <button data-id="${value.Id}" id="delbtn" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
                        </td>
                    </tr>
                `)
            })
            $('tbody').empty().html(arr.join(''))
        });
        
    }

    //添加按钮
    $('#addbtn').on('click',function(){
        indexAdd =  layer.open({
            title: '添加文章类别',
            type:1,
          area:['500px','260px'],
            content: `<form id="addform" class="layui-form" action="" >
    
                                           <!-- 1，分类名称 -->
                                  <div class="layui-form-item">
                                      <label class="layui-form-label">分类名称</label>
                                          <div class="layui-input-block">
                                              <input type="text" name="name" required lay-verify="required"
                                                  placeholder="请输入分类名称" autocomplete="off" class="layui-input" >
                                          </div>
                                  </div>
                                          <!-- 2，分类别名 -->
                                   <div class="layui-form-item">
                                      <label class="layui-form-label">分类别名</label>
                                          <div class="layui-input-block">
                                               <input type="text" name="alias" required lay-verify="required"
                                               placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                                   </div>
                                  </div>
                                              <!-- 2，按钮 -->
                                  <div class="layui-form-item">
                                          <div class="layui-input-block">
                                          <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                          <button type="reset" class="layui-btn"  lay-filter="formDemo">重置</button>
                                  </div>
                                  </div>
                             
                                </form> `
        }); 
    })

    let indexAdd = 0
    //注册弹框的点击事件 
    $('body').on('submit','#addform',function(e){
        e.preventDefault()
        //发送ajax请求
        axios({
            url:'/my/article/addcates',
            method:'post',
            data: $(this).serialize()
        }).then(({data:res})=>{
            //成功回调
            console.log(res)
            if(res.status != 0){
                return layer.msg(res.message)
            }
            layer.msg('添加分类成功！')
            initArtCateList()
            layer.close(indexAdd)
        });
    })

    //修改按钮
    let indexEdit = 0
    $('tbody').on('click','#editbtn',function(){
         
        //提取ID 发送ajax请求修改
        let id = $(this).attr('data-id')
        //点击按钮，从服务器获取值，赋给弹窗
        axios({
            url:'/my/article/cates/'+id,
            method:'get',
        }).then(({data:res})=>{
            console.log(res)
            //成功回调 结果旋绕到open
            indexEdit = layer.open({
                title: '修改文章类别',
                type:1,
              area:['500px','260px'],
                content: `<form id="editform" class="layui-form" action="" >
                <input type="hidden" value="${id}" name="Id">
                                               <!-- 1，分类名称 -->
                                      <div class="layui-form-item">
                                          <label class="layui-form-label">分类名称</label>
                                              <div class="layui-input-block">
                                                  <input type="text" name="name" required lay-verify="required"
                                                      placeholder="请输入分类名称" autocomplete="off" class="layui-input" value="${res.data.name}">
                                              </div>
                                      </div>
                                              <!-- 2，分类别名 -->
                                       <div class="layui-form-item">
                                          <label class="layui-form-label">分类别名</label>
                                              <div class="layui-input-block">
                                                   <input type="text" name="alias" required lay-verify="required"
                                                   placeholder="请输入分类别名" autocomplete="off" class="layui-input" value="${res.data.alias}">
                                       </div>
                                      </div>
                                                  <!-- 2，按钮 -->
                                      <div class="layui-form-item">
                                              <div class="layui-input-block">
                                              <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                                              
                                      </div>
                                      </div>
                                 
                                    </form> `
            });



        });
    })

    //修改按钮事件 
    $('body').on('submit','#editform',function(e){
        e.preventDefault()
        console.log($(this).serialize())
        axios({
            url:'/my/article/updatecate',
            method:'post',
            data: $(this).serialize()
        }).then(({data:res})=>{
            //成功回调
            if(res.status != 0 ) return layer.msg(res.message)
            layer.msg('恭喜您！修改成功！')
            initArtCateList()
            layer.close(indexEdit)
        });
    })
    
    //删除按钮
    $('tbody').on('click','#delbtn',function(){
        //获取id
        let id = $(this).attr('data-id')
        axios({
            url:'/my/article/deletecate/'+id,
            method:'get',
            
        }).then(({data:res})=>{
            //成功回调
            console.log(res)
            if(res.status != 0 ) return layer.msg(res.message)

            layer.msg("文章分类删除成功！")
            initArtCateList()
        });
    })
})